<template>
    <div>
        <a-breadcrumb style="margin: 0">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>个人信息</a-breadcrumb-item>
          <a-breadcrumb-item>基本信息</a-breadcrumb-item>
        </a-breadcrumb>
    <div>
        <el-card class="back" shadow="hover">
        <el-row :gutter="20">
            <el-form :inline="true" :model="formInline" >
        <el-col :span="10"><div >
        <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="姓名"></el-input>
        </el-form-item></div></el-col>
        <el-col :span="10"><div >
        <el-form-item ><el-radio v-model="radio" label="1">男</el-radio></el-form-item>
        <el-form-item label="  "></el-form-item>
        <el-form-item ><el-radio v-model="radio" label="2">女</el-radio></el-form-item>
        <el-form-item label="           "></el-form-item>
        <!-- <el-form-item label="默认头像"></el-form-item> -->
        </div></el-col>
        <el-col :span="4"><div > <el-form-item>
            <!-- <el-button type="primary" @click="onSubmit">查询</el-button> -->
        </el-form-item></div></el-col>
        </el-form>
        </el-row> 
        <el-row>
        <el-form :inline="true" :model="formInline">
        <el-col :span="10"><div >
        <el-form-item label="民族"> 
            <el-input v-model="formInline.minzu" placeholder="民族"></el-input>
        </el-form-item>
            </div></el-col>
        <el-col :span="10"><div >
        <el-form-item label="出生日期"> 
            <el-input v-model="numberValidateForm.time" placeholder="xxxx-xx-xx"></el-input>
        </el-form-item> </div></el-col>
        </el-form>
        </el-row> 
        <el-row>
        <el-form :inline="true" :model="formInline">
        <el-col :span="10"><div >
        <el-form-item label="身高"> 
            <el-input v-model="formInline.height" placeholder="xxxcm"></el-input>
        </el-form-item>
            </div></el-col>
        <el-col :span="10"><div >
        <el-form-item label="体重"> 
            <el-input v-model="formInline.weight" placeholder="kg"></el-input>
        </el-form-item> </div></el-col>
        </el-form>
        </el-row>
        <el-row>
  <el-form :inline="true" :model="formInline">
  <el-col :span="10"><div >
  <el-form-item label="健康状况"> 
    <el-input v-model="formInline.zhuangkuang" placeholder="健康"></el-input>
  </el-form-item>
     </div></el-col>
  <el-col :span="10"><div >
   <el-form-item label="婚姻状况"> 
    <el-select v-model="formInline.region" placeholder="婚姻状况">
      <el-option label="未婚" value="weihun"></el-option>
      <el-option label="已婚" value="yihun"></el-option>
    </el-select>
  </el-form-item> </div></el-col>
  </el-form>
</el-row> 

<el-row>
  <el-form :inline="true" :model="formInline">
  <el-col :span="10">
      <div >
  <el-form-item label="身份证号"> 
    <el-input v-model="formInline.shenfenzhenghao" placeholder="身份证号"></el-input>
  </el-form-item>
     </div>
     </el-col>
 <el-col :span="10"><div >
    <el-form-item label="照片"> 
      <a-upload
    name="avatar"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    :before-upload="beforeUpload"
    @change="handleChange">
    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
    <div v-else>
      <a-icon :type="loading ? 'loading' : 'plus'" />
      <div class="ant-upload-text">
        Upload
      </div>
    </div>
  </a-upload>
  </el-form-item> 

   </div>
   </el-col>  
  </el-form> 
</el-row> 

<el-row>
  <el-form :inline="true" :model="formInline">
  <el-col :span="10"><div >
  <el-form-item label="邮箱"> 
    <el-input v-model="formInline.youxiang"></el-input>
  </el-form-item>
     </div></el-col>
  <el-col :span="10"><div >
   <el-form-item label="政治面貌"> 
    <el-input v-model="formInline.mianmao"></el-input>
  </el-form-item> </div></el-col>
  </el-form>
</el-row> 

<el-row>
  <el-form :inline="true" :model="formInline">
  <el-col :span="10"><div >
  <el-form-item label="兴趣爱好"> 
    <el-input v-model="formInline.aihao"></el-input>
  </el-form-item>
     </div></el-col>
  <el-col :span="10"><div >
   <el-form-item label="手机号码"> 
    <el-input v-model="formInline.haoma"></el-input>
  </el-form-item> </div></el-col>
  </el-form>
</el-row> 

<el-row>
  <el-form :inline="true" :model="formInline">
  <el-col :span="10"><div >
  <el-form-item label="最高学历"> 
    <el-select v-model="formInline.xueli" placeholder="最高学历">
      <el-option label="高中" value="gaozhong"></el-option>
      <el-option label="大学" value="daoxue"></el-option>
      <el-option label="硕士" value="shuoshi"></el-option>
      <el-option label="博士" value="boshi"></el-option>

    </el-select>
     </el-form-item>
     </div></el-col>
  <el-col :span="10"><div >
   <el-form-item label="所学专业"> 
    <el-input v-model="formInline.zhuanye"></el-input>
  </el-form-item> </div></el-col>
  </el-form>
</el-row> 

<el-row>
  <el-form :inline="true" :model="formInline">
  <el-col :span="10"><div >
  <el-form-item label="在哪工作"> 
    <el-input v-model="formInline.gongzuo"></el-input>
  </el-form-item>
     </div></el-col>
  <el-col :span="10"><div >
   <el-form-item label="现居住地"> 
    <el-input v-model="formInline.dizhi"></el-input>
  </el-form-item> </div></el-col>
  </el-form>
</el-row> 

<el-row>
  <el-form :inline="true" :model="formInline">
  <el-col :span="10"><div >
  <el-form-item label="求职岗位"> 
    <el-input v-model="formInline.gangwei"></el-input>
  </el-form-item>
     </div></el-col>
  <el-col :span="10"><div >
   <el-form-item label="期望薪资"> 
    <el-input v-model="formInline.xizi"></el-input>
  </el-form-item> </div></el-col>
  </el-form>
</el-row> 
<div style="margin-left:280px">
   <el-button :plain="true" @click="open1">保存</el-button>
  <el-button :plain="true" @click="open2">修改</el-button>
  <el-button :plain="true" @click="open3">取消</el-button>
</div>
</el-card>
</div>
</div>
  
</template>
<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
  export default {
    data() {
      return {
        formInline: {
          name: '',
          region: '',
          zhuangkuang:'', 
          minzu:'',  
          aihao:'',  
          youxiang:'',
          haoma:'',
          mianmao:'',   
          xueli:'',
          gongzuo:'',
          dizi:'',
          gangwei:'',
          xinzi:'',
          zhuangye:'',
          id:''
        },
        radio:
        {
          radio:'1',
        lable:'1',
        },
        input:{
          input:'',
        },
        numberValidateForm: {
        //   id: '',
          time:'',
          height:'',
          weight:'',
        },
        loading: false,
        imageUrl: '',
       
          }},
    methods: {
      onSubmit() {
        console.log('submit!');
      },
   
      
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
      open1() {
        this.$message({
          message: '恭喜你，信息已保存',
          type: 'success'
        });
      },
      open2() {
        this.$message({
          message: '信息可以修改咯',
          type: 'warning'
        });
      },

      open3() {
        this.$message({
          message: '操作已取消',
          type: ''
        });
      },
    }
}  
</script>

<style lang="less" scoped>
    div {
        font-size: 14px;
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    top:300px;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .back{
    background-color: #f1f4f7;
    margin-top:20px;
  }

</style>